<template>
  <m-page>
    <!-- 贷款发放账户页 -->
    <m-header title="请选择贷款发放账户"></m-header>
    <div class="loan_account">
      <ynet-field>
        <ynet-field-item
          title="请选择账户"
          :content="account"
          placeholder="请选择贷款发放账户"
          @click="showSelector"
          arrow
          solid
        ></ynet-field-item>
      </ynet-field>

      <!-- 银行卡小标记 -->
      <div class="account_tip">{{accountTipstr}}</div>

      <!-- 短信验证or取款密码弹出层 -->
      <ynet-popup v-model="isPopupShow.bottom" position="bottom">
        <ynet-popup-title-bar :title="this.showPwd == '1'?'请输入短信验证码':'请输入取款密码'"></ynet-popup-title-bar>
        <div class="md-example-popup md-example-popup-bottom">
          <div class="message_checked" v-if="this.showPwd == '1'">
            <p>
              预留手机号：
              <span>158****1234</span>
            </p>

            <div class="check_input">
              <input type="text" :value="number" class="inputnumber" />
              <span class="check_btn" @click="getIdentifyCode()">获取验证码</span>
            </div>

            <ynet-button type="default" class="confirm_btn" @click="handConfirm()">确认</ynet-button>

            <ynet-number-keyboard
              type="simple"
              v-model="isKeyBoardShow"
              @enter="onNumberEnter"
              @delete="onNumberDelete"
              @hide="onNumberHide"
            ></ynet-number-keyboard>
          </div>

          <div class="password_checked" v-if="this.showPwd == '2'">
            <div class="password_checked_text">选择贷款发放账户</div>
            <div class="password_checked_content">
              <img src alt />
              <span>长行借记卡 （尾号：8737）</span>
            </div>

            <md-codebox :maxlength="6" v-model="password" system />
            <ynet-number-keyboard
              type="simple"
              v-model="isKeyBoardShow"
              @enter="onNumberEnter1"
              @delete="onNumberDelete1"
              @hide="onNumberHide1"
            ></ynet-number-keyboard>
          </div>
        </div>
      </ynet-popup>

      <ynet-button type="warning" @click="handClick('bottom')">下一步</ynet-button>
    </div>
  </m-page>
</template>

<script>
import { Toast, Codebox } from "mand-mobile";
import {
  Button,
  Popup,
  Field,
  FieldItem,
  NumberKeyboard,
  PopupTitleBar
} from "ynet-mobile";
export default {
  components: {
    [NumberKeyboard.name]: NumberKeyboard,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [PopupTitleBar.name]: PopupTitleBar,
    [Toast.component]: name,
    [Codebox.name]: Codebox
  },
  data() {
    return {
      account: "长沙银行 借记卡 （3269）",
      accountTipstr: "",
      isPopupShow: {},
      isKeyBoardShow: true,
      number: "", //键盘输入
      showPwd: "1", //1：短信验证  2：取款密码验证
      password: "" //输入密码
    };
  },
  created() {
    this.accountTipstr = this.account.charAt(0);
  },
  methods: {
    // 进入账户选择页面
    showSelector() {
      console.log("111");
    },
    //下一步按钮
    handClick(type) {
      this.$set(this.isPopupShow, type, true);
    },
    hidePopUp(type) {
      this.$set(this.isPopupShow, type, false);
    },

    onNumberEnter(val) {
      this.number += val;
    },
    onNumberDelete() {
      if (this.number === "") {
        return;
      }
      this.number = this.number.substr(0, this.number.length - 1);
    },
    onNumberHide() {
      this.number = "";
    },
    onNumberEnter1(val) {
      this.password += val;
    },
    onNumberDelete1() {
      if (this.password === "") {
        return;
      }
      this.password = this.password.substr(0, this.password.length - 1);
    },
    onNumberHide1() {
      this.password = "";
    },
    //点击获取验证码
    getIdentifyCode() {},
    //验证码确认按钮
    handConfirm() {
      if (this.number == "") {
        this.showPwd = "2";
      } else {
        Toast.info("验证码错误！");
      }
    }
  },
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

